<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_页面固定广告条</title>
    <style>
        .top{
            background-color: #5aa4ea;
            height: 120px;
            font-size:30px;
            color:#fff;
            position:fixed;
            /*使用固定定位后，元素脱离文档流，释放布局空间，不再支撑元素高度
            也无法继承父元素的宽度，所以可以自设宽度为100vw（100%视口宽度viewport），也就是全屏宽*/
            width: 100vw;
            top:0;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position:fixed;
            top:300px;

        }
        .left{
            background:#fff799;
            left:20px;
        }
        .right{
            background: #f35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }

    </style>
</head>
<body>
<div class="top" >顶部广告条</div>
<div class="left">左侧广告条</div>
<div class="right">右侧广告条</div>
<div class="main">
    网页内容<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto dicta enim est ex fugit minima
        molestiae nesciunt non numquam obcaecati officiis pariatur porro, quia repellat similique sunt totam vero?
    </div>
    <div>Ducimus eos error harum maxime molestiae omnis perferendis quae quos ut voluptates. Autem delectus dolores, eos
        esse explicabo fuga hic iste maiores natus non placeat quae recusandae saepe temporibus, tenetur?
    </div>
    <div>Ab delectus deserunt fugiat numquam perspiciatis provident qui quia, quisquam ratione sapiente, sint totam
        voluptatum. Aut consequuntur deleniti dignissimos dolorum eos fugiat nulla obcaecati praesentium similique!
        Deserunt dolores incidunt numquam!
    </div>
    <div>Explicabo labore maxime mollitia nisi similique temporibus! Cupiditate delectus dolores excepturi
        exercitationem fugit iste, libero mollitia placeat quae quia quos sed tempore. Asperiores cum deleniti dolorum
        est perspiciatis, quae quibusdam?
    </div>
    <div>Aliquid, at autem blanditiis, cumque dolor et laboriosam modi molestiae nesciunt optio quia quibusdam ratione
        temporibus. Alias at, atque consequuntur cupiditate eius eveniet exercitationem, expedita magni placeat
        praesentium reiciendis sint?
    </div>
    <div>Ad assumenda consequuntur doloribus eum fugiat iste minima provident quae quas ratione? Ad adipisci aliquid
        cum, deleniti eaque excepturi, fugiat ipsum magnam maxime nulla odit quam quibusdam quisquam quod, ullam.
    </div>
    <div>Aspernatur atque beatae commodi dolorum facilis id inventore laborum minus modi numquam, officiis perferendis
        reprehenderit rerum! Aperiam illum laboriosam mollitia reprehenderit. Cum expedita iste magnam, necessitatibus
        possimus quisquam tempora ullam!
    </div>
    <div>Ad alias, aliquid at atque dignissimos esse explicabo illo magni molestiae officia repudiandae saepe,
        similique, sunt veritatis voluptate. Cum dicta distinctio ducimus fugiat itaque, maiores minima optio rerum vel
        veniam?
    </div>
    <div>Aperiam assumenda iure molestias obcaecati ullam! Deleniti perferendis possimus reiciendis repellat? Atque
        distinctio doloremque eius error, fugit magnam modi nesciunt obcaecati, officiis quisquam repellat saepe sunt
        suscipit voluptate voluptatum! Rem.
    </div>
    <div>A aut cupiditate debitis fugit harum inventore ipsam, iste laudantium libero magnam minus nobis odio odit, quo
        quod ratione soluta suscipit vel veritatis voluptatum. Accusantium autem inventore totam vel voluptatem?
    </div>
    <div>Earum mollitia nemo quidem. Aliquam cum deleniti deserunt ducimus eius enim eveniet excepturi, exercitationem
        ipsa ipsum iure, laboriosam natus necessitatibus, nulla numquam odit officia pariatur quisquam tempora ullam
        velit vitae.
    </div>
    <div>Aperiam architecto assumenda cum eligendi facilis fugit harum iure laborum laudantium modi nemo nobis non
        officia perspiciatis quam quis ratione recusandae, reprehenderit ullam vel? Atque beatae esse laboriosam non
        voluptates.
    </div>
    <div>Accusantium neque nobis tempora! Alias aspernatur atque dignissimos doloremque, est fugit ipsa ipsam iusto
        magni necessitatibus, nobis quae quia quidem reprehenderit, tempora tempore tenetur voluptate! Id molestiae
        placeat possimus sed.
    </div>
    <div>Aliquid architecto at culpa deleniti distinctio ducimus earum enim exercitationem illo, illum incidunt labore
        laborum modi neque odit optio, pariatur quisquam recusandae reprehenderit sequi. Ea error maxime perferendis
        suscipit unde.
    </div>
    <div>Accusantium ad beatae commodi consequuntur corporis dolorum eaque eligendi esse explicabo fuga ipsa iure
        laudantium magni maiores minima molestias nisi possimus provident quam ratione reiciendis, repellat repellendus
        temporibus, vel vitae.
    </div>
    <div>Consequatur culpa eius eligendi et, excepturi magnam nam repellat vel veniam. Alias beatae enim in ipsa
        mollitia, nostrum reprehenderit similique unde. Alias architecto aspernatur blanditiis exercitationem quae quasi
        qui similique.
    </div>
    <div>Corporis est incidunt neque praesentium? A cumque delectus distinctio dolorum labore minus optio? Officia
        perspiciatis quam repudiandae vero. Commodi debitis dolore esse ex illo iusto odio perferendis quam sed
        voluptate.
    </div>
    <div>Aperiam culpa doloremque expedita facilis iste necessitatibus optio ratione sit sunt vitae. A cumque doloribus
        illo labore odio, sed vel vitae. Accusamus consequatur dolorum facere facilis ipsa nihil repellat! Iusto?
    </div>
    <div>Accusantium consequuntur corporis culpa cum cupiditate delectus dolores, enim id iure laudantium maiores minima
        molestias mollitia nesciunt non optio pariatur quas quidem quo rerum tempora vero vitae! Commodi ipsam, velit!
    </div>
    <div>A accusamus aspernatur corporis delectus deserunt dicta dolorum esse explicabo fugiat inventore itaque
        laboriosam laudantium magnam maxime molestias odit pariatur provident, quae quia quod sapiente, tempora veniam
        voluptatem. Ratione, ut?
    </div></div>
</div>
</body>
</html>